<template>
    <div id="FPPart">
        <el-form label-width="120px">
            <el-form-item label="软驱类型">
                <el-select v-model="floppy.vfdType" @change="typeChange">
                    <el-option v-for="item in VfdTypeEnums" :key="item.value" :value="item.value" :label="item.text"></el-option>
                </el-select>
            </el-form-item>
            <template v-if="floppy.vfdType === enums.VfdTypeEnum.IMAGE_STORAGE">
                <el-form-item label="镜像库">
                    <el-select v-model="floppy.dataStore.id" @change="getIMAGEPath">
                        <el-option v-for="item in dataStoreList" :key="item.id" :value="item.id" :label="item.name"></el-option>
                    </el-select>
                </el-form-item>
            </template>
            <el-form-item label="软驱介质">
                <el-select v-model="floppy.path" :disabled="isDisabled">
                    <el-option v-for="(item, index) in pathArray" :key="index" :value="item.path" :label="item.name"></el-option>
                </el-select>
                <el-tooltip placement="right">
                    <div slot="content">
                        <div v-html="i18n.t('showFloppyInfo')"></div>
                    </div>
                    <span class="icon-info"></span>
                </el-tooltip>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
export default {
    name: 'floppy',
    props: ['tempFloppy', 'modetype', 'options'],
    data() {
        return {
            oldVmData: {
                floppy: {
                    vfdType: this.enums.vfdTypeEnum.LOCAL_STORAGE,
                    dataStore: null,
                    path: ''
                }
            },
            pathArray: [{
                name: '',
                path: ''
            }],
            floppy: {
                vfdType: this.$attrs.vmData.floppy && this.$attrs.vmData.floppy.vfdType ? this.$attrs.vmData.floppy.vfdType : this.enums.vfdTypeEnum.LOCAL_STORAGE,
                dataStore: {
                    id: ''
                },
                path: ''
            },
            dataStoreList: [],
            isDisabled: !!this.tempFloppy
        };
    },
    watch: {
        guestosLabel: function () {
            this.typeChange(this.$attrs.vmData.floppy.vfdType);
        },
        'floppy': {
            handler () {
                this.$emit('updateVmData', 'FPPart', this.floppy);
            }
        },
        'options': {
            handler (val) {
                if (val && val.currentTabName === 'FPPart') {
                    if (val.addNew) {
                        this.$emit('changeAddOrDel', 'addNew', false);
                    } else if (val.delOne) {
                        this.delFloppy();
                        this.$emit('changeAddOrDel', 'delOne', false);
                    }
                }
            },
            deep: true
        }
    },
    mounted() {
        if (this.$attrs.vmData.floppy) {
            this.oldVmData = JSON.parse(JSON.stringify(this.$attrs.vmData));
        }
    }
};
</script>
